<template>
  <div class="wrap">
    <div class="item item-1">
      <div class="item-title">订单总数</div>
      <div class="item-cont">{{obj.orderNum}}</div>
    </div>
    <div class="item item-2">
      <div class="item-title">销售总额</div>
      <div class="item-cont">{{obj.saleAmount}}</div>
    </div>
    <div class="item item-3">
      <div class="item-title">退货总额</div>
      <div class="item-cont">{{obj.refundAmount}}</div>
    </div>
    <div class="item item-4">
      <div class="item-title">新增商户</div>
      <div class="item-cont">{{obj.newUser}}</div>
    </div>
    <div class="item item-5" style="background-color:#f1572d">
      <div class="item-title">商家总数</div>
      <div class="item-cont">{{obj.buyerNum}}</div>
    </div>
  </div>
</template>

<script>
  import Request from "../request";


  export default {
    data() {
      return {
        request: new Request(),
        obj: {
          orderNum: 0,
          saleAmount: 0.00,
          refundAmount: 0.00,
          newUser: 0,
          buyerNum: 0
        }
      }
    },
    watch: {},
    mounted() {
      this.getOverView()
    },
    methods: {
      getOverView() {
        this.request.overview().then(res => {
          if (res.code === 200) {
            this.obj = res.ext
          } else {
            this.$message.warning(res.msg)
          }
        }).catch(err => {
          this.$message.warning(err)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .wrap {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box; /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox; /* 混合版本语法: IE 10 */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
    -webkit-box-pack: justify;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background-color: white;
    padding: 5px;

  .item {
    width: 19%;
    color: white;

  .item-title {
    font-weight: 700;
    padding: 10px 0 10px 20px;
  }

  .item-cont {
    padding: 10px 20px 20px 30px;
  }

  }
  .item-1 {
    background-color: #0067a6;
  }

  .item-2 {
    background-color: #00abd8;
  }

  .item-3 {
    background-color: #008972;
  }

  .item-4 {
    background-color: #efc028;
  }

  .item-5 {
    background-color:   #f1572d;
  }

  }
</style>
